<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>小马技术 | Chart.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/myweb/style/main.css" />
    <script src="/myweb/chartjs/Chart.bundle.js"></script>
</head>

<body>
    <canvas id="myChart">
        图表区
    </canvas>

    <script>
        (function () {
            'use strict';

            var type = 'line';
            var data = {
                labels: [2014, 2015, 2016, 2017, 2018],
                datasets: [
                    {
                        label: '优酷',
                        data: [100, 150, 300, 800, 1600],
                        borderColor: 'red',
                        borderWidth: 3,
                        fill: false,
                        backgroundColor: 'rgba(128,0,0,0.5)',
                        lineTension: 0,
                        pointStyle: 'rect', //circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle
                        pointRadius: 18,
                    },
                    {
                        label: 'Youtube',
                        data: [50, 100, 200, 400, 600],
                        borderColor: 'green',
                        borderWidth: 5,
                        fill: true,
                        backgroundColor: 'rgba(0,128,0,0.5)',
                        pointStyle: 'triangle',
                        pointRadius: 8,
                    }
                ]
            };

            var options = {
                scales: {
                    yAxes: [{
                        ticks: {
                            min: 0,
                            max: 1800,
                            stepSize: 300,
                            callback: function (value, index, values) {
                                return value + '人';
                            },
                        }
                    }]
                },
                title: {
                    display: true,
                    text: '小马视频',
                    fontColor: 'green',
                    fontSize: '24'
                }
            };

            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                type: type,
                data: data,
                options: options
            });
        })();
    </script>
</body>

</html>